<template>
  <div>
    <headerMiddle title="栏目管理" />
    <div class="active">
      <h3>点击删除以下频道</h3>
      <div class="tab" v-for="(item,index) in tabActive" :key="index">{{item.name}}</div>
    </div>
    <div class="deactive">
      <h3>点击添加</h3>
    </div>
  </div>
</template>

<script>
import headerMiddle from '../components/headerMidder'
export default {
components:{
    headerMiddle
},
data(){
 return {
  tabActive:[],
  tabDeactive: []
 }
},
mounted(){
   this.$axios({
       url:"/category",
       method:'get',
   }).then(res=>{
       const {data} = res.data;
       this.tabActive = data;
   })
}
};
</script>

<style lang="less" scoped>
.active,
.deacttive {
    height: 40vh;
    padding: 10px;
}
.tab {
    height: 8.333vw;
    line-height: 8.333vw;
    padding: 0 2.778vw;
    background: #f8f8f8;
    border: 1px solid #eee;
    float: left;
    margin: 1.389vw 1.778vw;
}
</style>